{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/home/css/upload.css?v={$version}">
{/block}

{block name="main"}

    <!-- 中间内容区域 -->
    <div class="content-area middle-content inline-box">
        {include file='user/member_left_nav'/}
        <div class="right-content-box inline-block">
            <form id="form">
                <div class="pc-form-line inline-box">
                    <div class="title inline-block">标题：</div>
                    <div class="ibox inline-block">
                        <input id="title" type="text" name="title" value="{$vo.title}" />
                    </div>
                </div>

                <div class="pc-form-line long-title inline-box">
                    <video src="{$vo.video}" width="100%" height="300"  {if !isset($vo.video)} style="display: none" {/if} id="video"  controls="controls"></video>
                    <div class="title inline-block">上传视频：</div>
                    <div class="ibox inline-block">
                        <a class="video-btn inline-box">
                            <div class="vicon inline-block"></div>
                            <div class="vwords inline-block">上传视频</div>
                            <input type="file" name="video" accept="video/mp4,video/mkv,video/3gp,video/wmv" value="" />
                        </a>
                    </div>
                    <div class="progress-line" style="display: none">
                        <div id="progress-bar" class="progress-bg" style="width: 10%;"></div>
                    </div>
                </div>
                {if condition="$vo.id"}
                    <input type="hidden" name="id" value="{$vo.id}">
                {/if}
                <input type="hidden" id="video_val" name="video" value="{$vo.video}"/>
                <button id="submit" type="button" class="submit-btn">提交</button>
            </form>
        </div>
    </div>
    <!-- 中间内容区域 END -->
{/block}

{block name="script"}
    <script src="/static/home/js/qiniu.js"></script>
    <script>
        var videoExt = ['video/mp4','video/mkv','video/3gp','video/wmv'];
        var videoBtn = $('.video-btn');

        videoBtn.find('input[type=file]').click(function(e) {
            e.stopPropagation();
        });

        videoBtn.find('.vname').click(function(e) {
            e.stopPropagation();
        });

        videoBtn.click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).find('input[type=file]').click();
        });

        videoBtn.find('input[type=file]').change(function(e) {
            var file = this.files[0];
            if(!file) {
                alert('没有上传文件');
                $(this).val('');
                return false;
            }else if(videoExt.indexOf(file.type) < 0) {
                alert('不支持的视频格式');
                $(this).val('');
                return false;
            }else if(file.size > 104857600) {
                alert('上传的视频不能超过100M');
                $(this).val('');
                return false;
            }

            var observable = qiniu.upload(file,null, '{$token}');
            var observer = {
                error(err){
                    alert('上传失败');
                },complete(res){
                    $('#video_val').val('{$domain}/'+res.key);
                    $('#video').css('display','block');
                    $('#video').attr('src','{$domain}/'+res.key);
                    $('#progress-bar').parent().css('display','none');
                    alert('上传成功');
                },  next(res){
                    $('#progress-bar').parent().css('display','block');
                    $('#progress-bar').css('width',(res.total.percent)+'%');
                },
            };
            observable.subscribe(observer);


        });
        $('#submit').on('click',function(){
            var obj = $("#form").serializeArray();
            $.post('{$action}',obj,function(data){
                if(data.code != 1){
                    alert(data.msg);
                }else{
                    alert('发布成功');
                    self.location='{$back_url}';
                }
            });
        });
    </script>
{/block}